<template>
	<view class="feedback">
		<view class="feed_tt bold">反馈内容</view>
		<textarea v-model="content" maxlength="100" class="style_in" placeholder-style="placeStyle" value="" placeholder="您可以在这里输入内容..." />

		<view class="phone_in f f_align_center">
			<view class="p_item_inser" @click="chooseImages">
				<i class="iconfont iconlianhe49"></i>
			</view>
			<view class="p_item_inser" v-for="(item,index) in imageList" :key="index">
				<image class="autoImg" :src="item" mode=""></image>
				<i class="iconfont iconzu4520" @click="closed_list(index)"></i>
			</view>
		</view>
		<view class="biding_btn bold" @click="feadBack()">
			确定
		</view>
	</view>
</template>

<script>
	import $uplaod from '../../utils/upload.js'
	export default {
		data() {
			return {
				content:'',
				imageList:[]
			};
		},
		methods:{
			//选中图片
			chooseImages(){
				const _this = this;
				if(_this.imageList.length >= 3){
					return _this.$showToast('最多只能上传三张图片');
				}
				uni.chooseImage({
					count:3,
					sizeType:["compressed"],
					success(res) {
						if(_this.imageList.length+res.tempFilePaths.length <= 3){
							_this.imageList = _this.imageList.concat(res.tempFilePaths)
						}else{
							_this.$showToast('最多只能上传三张图片')
						}
						console.log(_this.imageList);
					}
				})
			},
			closed_list(index){
				this.imageList.splice(index,1)
			},
			//反馈
			async feadBack(){
				const _this = this;
				let urlList = [];
				for(let i=0;i<_this.imageList.length;i++){
					urlList.push(await $uplaod(_this.imageList[i]))
				}
				let res = (await _this.$http('/api/auth/user/feedback/addFeedback',"POST",{
					content:_this.content,
					urlList:urlList,
					feedbackType:''
				})).data;
				if(res && res.code == '0'){
					_this.imageList.splice(0);
					_this.content = '';
					_this.$showToast('反馈成功，我们将立即为你解决～')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.feedback{
		box-sizing: border-box;
		width: 100%;
		min-height: 100vh;
		background-color: #fff;
		border-top: solid 1rpx $ych_br_color;
		padding: 0 24rpx;
		.phone_in{
			margin-top: 32rpx;
			.p_item_inser{
				width: 160rpx;height: 160rpx;
				background-color: #F4F5F7;
				border-radius: 8rpx;
				@include flex_center;
				margin-left: 16rpx;
				position: relative;
				&:first-child{
					margin-left: 0;
				}
				.iconlianhe49{
					font-size: 48rpx;
					color: $ych_color;
				}
				image{border-radius: 8rpx;}
				.iconzu4520{
					color: #FF225B;font-size: 32rpx;
					position: absolute;
					top:-16rpx;
					right: -16rpx;
				}
			}
		}
		.feed_tt{
			font-size: 30rpx;
			color: #1A1A1A;
			padding: 20rpx 0 24rpx;
		}
		.style_in{
			box-sizing: border-box;
			width: 702rpx;
			height: 360rpx;
			background-color: #F4F5F7;
			border-radius: 8rpx;
			margin-bottom: 36rpx;
			padding: 24rpx;
		}
		.biding_btn{
			width: 606rpx;
			height: 88rpx;
			background-color: $ych_color;
			border-radius: 12rpx;
			font-size: 30rpx;
			color: #fff;
			@include flex_center;
			margin:160rpx auto;
			@include box_shadow_btn;
		}
	}
</style>
